
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Machine Multi-Purpose HTML Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/pe-icon-7-stroke.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/flexslider.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/theme.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/custom.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="http://fonts.googleapis.com/css?family=Roboto:100,400,300,700,400italic,500%7CMontserrat:400,700" rel="stylesheet" type="text/css">
    </head>
    <body>

				
		<div class="nav-container">
			<nav class="nav-1">
				<div class="container">
					<div class="row">
						<div class="col-xs-12">
							<a href="index.html" class="home-link">
								<img alt="Logo" class="logo" src="img/logo-square-light.png">
							</a>
							<ul class="menu">
								<li class="has-dropdown"><a href="#">Home</a>
									<ul class="subnav">
										<li><a href="index.html">Classic Home</a></li>
										<li><a href="home-2.html">Startup</a></li>
										<li><a href="home-3.html">Rustic</a></li>
										<li><a href="home-4.html">Agency</a></li>
										<li><a href="home-5.html">One Page</a></li>
										<li><a href="home-6.html">Personal</a></li>
										<li><a href="home-7.html">Landing</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Pages</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">About</a>
											<ul class="subnav-level-2">
												<li><a href="about-1.html">About 1</a></li>
												<li><a href="about-2.html">About 2</a></li>
												<li><a href="about-3.html">About 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Services</a>
											<ul class="subnav-level-2">
												<li><a href="services-1.html">Services 1</a></li>
												<li><a href="services-2.html">Services 2</a></li>
												<li><a href="services-3.html">Services 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Coming Soon</a>
											<ul class="subnav-level-2">
												<li><a href="coming-soon-1.html">Coming Soon 1</a></li>
												<li><a href="coming-soon-2.html">Coming Soon 2</a></li>
											</ul>
										</li>
										<li><a href="404.html">404 Error</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Blog</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Post Pages</a>
											<ul class="subnav-level-2">
												<li><a href="blog-1.html">Grid</a></li>
												<li><a href="blog-2.html">Grid Sidebar</a></li>
												<li><a href="blog-3.html">Image</a></li>
												<li><a href="blog-4.html">Image Sidebar</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Articles</a>
											<ul class="subnav-level-2">
												<li><a href="article-1.html">Article</a></li>
												<li><a href="article-2.html">Article Sidebar</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Work</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Projects</a>
											<ul class="subnav-level-2">
												<li><a href="work-1.html">Filter Grid</a></li>
												<li><a href="work-2.html">Large Grid</a></li>
											</ul>
										</li>
										<li><a href="work-single-1.html">Single</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Shop</a>
									<ul class="subnav">
										<li><a href="shop-1.html">Products Grid</a></li>
										<li><a href="product-1.html">Single Product</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Contact</a>
									<ul class="subnav">
										<li><a href="contact-1.html">Project Planner</a></li>
										<li><a href="contact-2.html">Map & Instagram</a></li>
										<li><a href="contact-3.html">Simple Form</a></li>
									</ul>
								</li>
							</ul>
							
							<ul class="social-links">
								<li><a href="#"><i class="ti ti-twitter-alt"></i></a></li>
								<li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
								<li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
							</ul>
						
							<div class="nav-functions">
						
								<div class="search-bar">
									<form class="search">
										<input type="text" placeholder="" name="search">
										<input type="submit" value="">
										<i class="pe-7s-search"></i>
									</form>
								</div>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			
				<div class="mobile-toggle">
					<div class="bar-1"></div>
					<div class="bar-2"></div>
				</div>
			</nav>
		</div>
		
		<div class="main-container">
					
			<section class="hero-slider large-image short-header">
				<ul class="slides">
					<li>
						<div class="background-image-holder background-parallax">
							<img alt="Slide Background" class="background-image" src="img/hero11.jpg">
						</div>
			
						<div class="container vertical-align">
							<div class="row">
								<div class="col-sm-12 text-center">
									<h1 class="text-white">What We Do</h1>
								</div>
							</div>
						</div><!--end of container-->	
					</li>
				</ul>
			</section>
			
			<section class="feature-lists">
				<div class="container">
					<div class="row">
						<div class="col-sm-12">
							<div class="text-block">
								<div class="detail-line"></div>
								<h5>Our Services</h5>
								<h4>We design for the ever-changing screen</h4>
							</div>
						</div>
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-md-4 col-sm-6">
							<div class="feature-list">
								<i class="icon icon-large pe-7s-credit"></i>
								<h5>E-Commerce Solutions</h5>
								<p>
									Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
								</p>
								<ul class="arrow-list">
									<li><a href="#">Web Design</a></li>
									<li><a href="#">Web Applications</a></li>
									<li><a href="#">Digital Strategy</a></li>
									<li><a href="#">Information Architecture</a></li>
									<li><a href="#">Copywriting</a></li>
								</ul>
							</div>
						</div>
					
						<div class="col-md-4 col-sm-6">
							<div class="feature-list">
								<i class="icon icon-large pe-7s-id"></i>
								<h5>Enterprise Systems</h5>
								<p>
									Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
								</p>
								<ul class="arrow-list">
									<li><a href="#">Web Design</a></li>
									<li><a href="#">Web Applications</a></li>
									<li><a href="#">Digital Strategy</a></li>
									<li><a href="#">Information Architecture</a></li>
								</ul>
							</div>
						</div>
					
						<div class="col-md-4 col-sm-6">
							<div class="feature-list">
								<i class="icon icon-large pe-7s-comment"></i>
								<h5>Marketing + Strategy</h5>
								<p>
									Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
								</p>
								<ul class="arrow-list">
									<li><a href="#">Web Design</a></li>
									<li><a href="#">Web Applications</a></li>
									<li><a href="#">Digital Strategy</a></li>
									<li><a href="#">Information Architecture</a></li>
									<li><a href="#">Copywriting</a></li>
									<li><a href="#">node.js</a></li>
								</ul>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>
			
			<section class="cto-features">
		
				<div class="container">
					<div class="row">
						<div class="col-md-4 col-sm-6">
							<div class="text-block">
								<h2>A template with vast application + potential</h2>
								<p class="lead">
									Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime  placeat facere possimus
								</p>
								<a class="btn" href="#">Find Out How</a>
							</div>
						</div>
					
						<div class="col-md-8 col-sm-6">
							<img alt="Screenshot" src="img/isometric-screen.png">
						</div>
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-sm-6">
							<div class="wide-feature text-center">
								<i class="pe-7s-browser cto-icon"></i>
								<h4>Get creative with custom blocks</h4>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
								</p>
								<a class="text-link" href="#">Start the conversation <i class="icon ti ti-arrow-right arrow_right"></i></a>
							</div>
						</div><!--end of individal wide feature-->
					
						<div class="col-sm-6">
							<div class="wide-feature text-center">
								<i class="pe-7s-date cto-icon"></i>
								<h4>Regular, community powered updates</h4>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
								</p>
								<a class="text-link" href="#">Start the conversation <i class="icon ti ti-arrow-right arrow_right"></i></a>
							</div>
						</div><!--end of individal wide feature-->
					</div><!--end of row-->
				
				</div><!--end of container-->
			
			</section>
			
			<section class="dark-action">
		
				<div class="background-image-holder">
					<img alt="Slide Background" class="background-image" src="img/hero17.jpg">
				</div>
		
				<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
								<h2 class="text-white">Start building your site for just $18 USD.</h2>
								<p class="text-white">
									Download package includes both Machine template and <a href="http://www.mrare.co/variant" class="inline-link">Variant</a> Page Builder
								</p>
								<a class="btn btn-white btn-filled" href="#">Purchase now from Themeforest</a>
								<a class="btn btn-white btn-filled" href="#">Learn more about Variant</a>
							</div>
						</div><!--end of row-->
				</div><!--end of container-->
			</section>
			<footer class="footer-6">
				<div class="container">
					<div class="row">
						<div class="col-md-3 col-md-offset-1 col-sm-6">
							<a href="#">
								<img class="logo" alt="logo" src="img/logo-square-light.png">
							</a>
							<p>
								300 Collins St.<br> 
								Suite 2A<br>  
								Melbourne, 3000
							</p>
							<p>
								P: +6148 3847 382<br>
								E: hello@machine.net
							</p>
						</div>
					
						<div class="col-md-4 col-sm-6">
							<h5>Twitter</h5>
							<div class="twitter-feed">
								<div class="tweets-feed" data-widget-id="492085717044981760">
							
								</div>
							</div>
						</div>
					
						<div class="col-md-2 col-md-offset-1 col-sm-12">
							<h5>Navigate</h5>
							<ul class="link-list">
								<li><a href="#">About Us</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">Our Work</a></li>
								<li><a href="#">Journal</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>
				
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-sm-12">
							<div class="footer-lower">
								<span>© Copyright 2014 Medium Rare, All Rights Reserved</span>
								<ul class="social-links">
									<li><a href="#"><i class="icon ti ti-twitter-alt"></i></a></li>
									<li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
									<li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
	
								</ul>
							</div>
						</div>
					</div><!--end of row-->
				
				</div><!--end of container-->	
			</footer>
		</div>
		
				
		<script src="js/jquery.min.js"></script>


        <script src="js/bootstrap.min.js"></script>
        <script src="js/skrollr.min.js"></script>
        <script src="js/flexslider.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <script src="js/twitterfetcher.min.js"></script>
        <script src="js/spectragram.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/jquery.plugin.min.js"></script>
        <script src="js/countdown.min.js"></script>
        <script src="js/placeholders.min.js"></script>
        <script src="js/parallax.js"></script>
    	<script src="js/scripts.js"></script>
    </body>
</html>

				